<template>
  <div>
    <div id="echart1" style="width: 500px; height: 300px"></div>
    <div id="echart2" style="width: 500px; height: 300px"></div>
    <div id="echart3" style="width: 500px; height: 300px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { queryWendu, queryGoodsByType } from "../api/data.js";

export default {
  name: "page3",
  data() {
    return {
      week: [],
      temp: [],
      result: [],
      resultFushi: [],
      fushiName: [],
      fushNum: [],
      result_dianqi: [],
      dianqi: [],
    };
  },
  mounted() {
    queryWendu().then((res) => {
      console.log("===查询天气结果==", res);
      this.result = res.data;
      for (var i = 0; i < this.result.length; i++) {
        this.week.push(this.result[i].week);
        this.temp.push(this.result[i].temp);
      }
      console.log("===处理后的结果==", this.week, this.temp);
      this.initEchart1();
    });
    queryGoodsByType({ type: 1 }).then((res) => {
      console.log("===查询服饰结果==", res);
      this.resultFushi = res.data;
      for (var i = 0; i < this.resultFushi.length; i++) {
        this.fushiName.push(this.resultFushi[i].goods);
        this.fushNum.push(this.resultFushi[i].number);
      }
      // console.log("==结果==", this.fushiName, this.fushNum);
      this.initEchart2();
    });
    queryGoodsByType({ type: 2 }).then((res) => {
      console.log("===结果==", res);
      this.result_dianqi = res.data;
      for (var i = 0; i < this.result_dianqi.length; i++) {
        var json = { value: 0, name: "" };
        json.value = this.result_dianqi[i].number;
        json.name = this.result_dianqi[i].goods;
        this.dianqi.push(json);
      }
      this.initEchart3();
    });
  },
  methods: {
    initEchart1() {
      var myChart = echarts.init(document.getElementById("echart1"));
      const option = {
        xAxis: {
          type: "category",
          data: this.week,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.temp,
            type: "line",
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
    },
    initEchart2() {
      var myChart = echarts.init(document.getElementById("echart2"));
      const option = {
        xAxis: {
          type: "category",
          data: this.fushiName,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.fushNum,
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
    },
    initEchart3() {
      var myChart = echarts.init(document.getElementById("echart3"));
      const option = {
        title: {
          text: "电器销售情况",
          subtext: "2024-12-16",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "销量",
            type: "pie",
            radius: "50%",
            data: this.dianqi,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>